<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算

  getter: 属性的get方法
  setter: 属性的set方法
-->

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName1是根据fistName和lastName计算产生-->
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

    <p>{{fullName1}}</p><!--调用fullName1 () -->
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: "#demo",
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B'
        },

        //计算属性
        computed: {
            //什么时候执行：初始化显示/相关的data发送了改变
            //计算并返回当前属性的值
            fullName1 () {//计算属性中的一个方法，方法的返回值作为属性值
                console.log('fullName1()');
                return this.firstName + ' ' + this.lastName;
            },

            fullName3: {
                // 1.你定义的，2.你没有调用，3.但最终它执行了
                // 1.什么时候调用，2.用来干嘛的
                //回调函数 当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
                get () {
                    return this.firstName + ' ' + this.lastName;
                },
                // 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                set (value) {
                    const names = value.split(' ');
                    this.firstName = names[0]
                    this.lastName = names[1]
                }

            }
        },

        //监视属性
        watch: {// 配置监视
            firstName: function (value) {// firstName发生了变化
                console.log(this);//就是vm对象
                this.fullName2 = value + ' ' + this.lastName;
            }
        }
    });

    vm.$watch('lastName', function (value) {
        //更新fullName2
        this.fullName2 = this.firstName + ' ' + value;
    });

</script>
</body>
</html>